<template>
  <div class="record">
    <div class="record_top">
      <div class="order">
        <span class="order_number">订单号：0869700007527</span>
        <span class="order_time">2021-10-14 23:10:16</span>
      </div>
      <div class="statistics">
        <span class="prod_num">共 9 件商品</span>
        <span class="Total">合计：<span class="price">¥9241.00</span></span>
      </div>
    </div>
    <div class="record_main">
      <div class="prod_list">
        <ul>
          <li>
            <div class="img">
              <img src="../assets/img/index/img/ia_10027.png" alt="" />
              <span>2</span>
            </div>
            <span class="prod_name">DJI Air 2S</span>
          </li>
          <li>
            <div class="img">
              <img src="../assets/img/index/img/ia_10027.png" alt="" />
              <span>2</span>
            </div>
            <span class="prod_name">DJI Air 2S</span>
          </li>
        </ul>
        <span class="more">. . .</span>
      </div>
      <div class="order_status">
        <span class="status">等待付款</span>
        <span class="remaining_time">23时08分42秒</span>
      </div>
      <div class="actions">
        <button class="order_detail">订单详情</button>
        <button class="porder_pay">立即支付</button>
        <button class="order_delete">删除订单</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang='scss' scoped>
.record {
  border: 1px solid #d9d9d9;
  margin-bottom: 16px;
  .record_top {
    border-bottom: 1px solid #d9d9d9;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    .order,
    .statistics {
      span {
        font-size: 14px;
      }
      .order_number,
      .prod_num {
        margin-right: 16px;
      }
      .Total {
        .price {
          font-weight: 600;
        }
      }
    }
  }
  .record_main {
    padding: 16px 27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;
    .prod_list {
      display: flex;
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          margin-right: 27px;
          .img {
            position: relative;
            img {
              width: 64px;
            }
            span {
              display: inline-block;
              width: 20px;
              background-color: #299aff;
              text-align: center;
              border-radius: 50%;
              color: white;
              position: absolute;
              top: 0;
              left: 56px;
            }
          }
          .prod_name {
            display: block;
            text-align: center;
            font-size: 12px;
          }
        }
      }
      .more {
        display: block;
        line-height: 60px;
        font-weight: 700;
        margin-left: 16px;
      }
    }
    .order_status {
      span {
        display: block;
        font-size: 15px;
        text-align: center;
        color: #f8612d;
      }
    }
    .actions {
      button {
        width: 78px;
        height: 32px;
        font-size: 14px;
        margin-left: 8px;
        border-radius: 4px;
        border: 0;
        background-color: white;
      }
      .order_detail {
        border: 1px solid #d4d7d9;
      }
      .porder_pay {
        background-color: #33a1ff;
        color: white;
      }
      .order_delete {
        background-color: rgb(238, 121, 121);
        color: white;
      }
    }
  }
}
</style>